<template>
  <div>
    <n-alert title="提示" type="info" style="margin-bottom:20px;">
      当前效果仅供参考，实际效果以小程序为准
    </n-alert>
    <div class="flex-center">
      <div style="width:340px;position: relative;">
        <img src="/images/phone.png" style="position:relative;width:100%;pointer-events: none;z-index: 99;" />
        <div style="position:absolute;top:20px;left:22px;right:22px;bottom:22px;">
          <img src="/images/headerPic.jpg" style="width:100%;height:230px" />
          <div style="position: absolute;display: flex;top:230px;left:0;right:0;bottom:0;">
            <sidebar v-model="active" @change="queryCategory">
              <sidebar-item v-for="cate in categoryItems" :title="cate.cateName" />
            </sidebar>
            <div style="flex:1;margin-left:10px;height: 100%;overflow: auto;">
              <card v-for="goods in goodsItems" :price="goods.sellPrice.toFixed(2)" :origin-price="goods.originPrice"
                :title="goods.goodsName" :desc="goods.goodsDesc"
                :thumb="goods.cover ? goods.cover[0] : '/images/default.jpg'" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { Sidebar, SidebarItem, Card } from 'vant';
import 'vant/lib/index.css';
import { ref } from 'vue';
import { GoodsAPI } from '@/app/api';

let active = ref(0);
let activeCategory = null;
let categoryItems = ref([]);
let goodsItems = ref([]);

let queryCategory = (index) => {
  active.value = index;
  return GoodsAPI.queryCategoryList().then((res) => {
    res.data = res.data || [];
    categoryItems.value = res.data;
    activeCategory = res.data[active.value] || [];
  }).then(() =>
    GoodsAPI.queryAllGoodsByCate({ cateId: activeCategory.id })
  ).then((res) => {
    goodsItems.value = res.data;
  })
}

queryCategory(0);

</script>